import React from 'react'
import {Row, Col, Form,Button, Table, Select, Input, Avatar, Modal, message, Checkbox, Switch,Tag,Card,DatePicker} from 'antd'
import './styles.css'
import Detail from "./Detail"
import api from "../../api/api";
import axios from 'axios';
const FormItem = Form.Item;



const {Search} = Input;
const {Option} = Select;

@Form.create()
class CheckinRecord extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            modelData: {
                title: "办理入住",
                visible: false,
                type: 1,//新增人员:1,添加 2,编辑
                gridList: {},
            },
            title: "办理入住",
            visible: false,
            data: [],
            identifySelectId:undefined,
            pageNum: 0,
            pageSize: 10,
            total: 0,
            selectedRowIds:[],
            setIdentify:"1",
            hiddenFlag:true,
            roomName:"",
            roomType:undefined,
            priceFrom: "",
            priceTo: "",
            belongAreaId:"",
            detailHidden:true,
            detailHiddenForMain:false,
            payform:true,
            modelRoom:{
                areaName:"",
                roomName:"",
                roomType:"",
                roomPrice:"",
            },
            modelRoom2:{
                rentTerm:"",
                checkindate:"",
            }
        };
    }



    componentDidMount() {
        this.selectAllCheckInRecord();

      }
    columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            className: "elementHidden",
            width: '1px'
        },
        {
            title: '客户姓名',
            dataIndex: 'name1',
            key: 'name1',
            width: '10px'
        },
        {
            title: '身份证号码',
            dataIndex: 'idcard1',
            key: 'idcard1',
            width: '10px'
        },
        {
            title: '性别',
            dataIndex: 'gender1',
            width: '15px',
            key: 'gender1'
        },
        {
            title: '手机号',
            dataIndex: 'phone1',
            width: '15px',
            key: 'phone1'
        },
        {
            title: '入住时间',
            dataIndex: 'checkinDate',
            width: '15px',
            key: 'checkinDate'
        },
        {
            title: '退房时间',
            dataIndex: 'checkoutDate',
            width: '15px',
            key: 'checkoutDate'
        },
        {
            title: '付款时间',
            dataIndex: 'payTime',
            width: '15px',
            key: 'payTime'
        },
        {
            title: '付款金额',
            dataIndex: 'money',
            width: '15px',
            key: 'money'
        },
        {
            title: '付款方式',
            dataIndex: 'payType',
            width: '15px',
            key: 'payType'
        },
        {
            title: '入住房间号',
            dataIndex: 'roomName',
            width: '15px',
            key: 'roomName'
        },
        {
            title: '入住天数',
            dataIndex: 'rentTerm',
            width: '15px',
            key: 'rentTerm'
        },
        {
            title: '是否为会员',
            dataIndex: 'isvip',
            width: '15px',
            key: 'isvip'
        },
        {
            title: '状态',
            dataIndex: 'status',
            width: '15px',
            key: 'status',
            render: status => {
                if (status == 1) {
                    return ("已入住")
                } else if (status == 0) {
                    return ("已退房")
                }

            }
        },
        {
            title: '操作',
            dataIndex: 'option',
            width: '15px',
            key: 'option',
            render: (_ext, record, Item) => {
                return (
                    <span>
                       <a className="optionMargin" onClick={() => this.onClickDetail(record)}>查看详情</a>
                    </span>
                )
            }
        }
    ];


    selectAllCheckInRecord() {
        let that = this;
        axios.post(api.api_URL + "/check/selectAllCheckInRecord?pageNum=" + this.state.pageNum + "&pageSize=" + this.state.pageSize, {
        }, {
            headers: {
                "Content-Type": api.ContentType
            }
        }).then(function (res) {
            console.info(res)
            if (res.data.errorCode != 1) {
                return;
            }
            // let totalSize = res.data.object.total;
            const dataList = [];
            for (let i = 0; i < res.data.objectList.length;i++) {
                let resContent = res.data.objectList[i];
                const content = {};
                content.key = (i + 1);
                content.id = resContent.id;
                content.name1 = resContent.name1;
                content.idcard1 = resContent.idcard1;
                content.gender1=resContent.gender1;
                content.phone1 = resContent.phone1;
                content.name2 = resContent.name2;
                content.idcard2 = resContent.idcard2;
                content.gender2=resContent.gender2;
                content.phone2 = resContent.phone2;
                content.name3 = resContent.name3;
                content.idcard3 = resContent.idcard3;
                content.gender3=resContent.gender3;
                content.phone3 = resContent.phone3;
                content.checkinDate = resContent.checkinDate;
                content.checkoutDate = resContent.checkoutTime;
                content.payTime = resContent.payTime;
                content.money = resContent.money;
                content.roomName = resContent.roomName;
                content.rentTerm = resContent.rentTerm;
                content.payType = resContent.payType;
                content.isvip = resContent.isvip;
                content.status=resContent.status;
                dataList[i] = content;
            }
            that.setState({
                data: dataList,
                // total: totalSize
            })
        }).catch(function (err) {
            console.log(err);
        });
    }

    //办理入住
    // onClickEdit(item) {
    //     this.setState({
    //         detailHidden:false,
    //         modelData: {
    //             title: "办理入住",
    //             type: 1,
    //             visible: true,
    //             gridList: item,
    //
    //         }
    //     }, () => {
    //         this.child.initEditData()
    //     });
    // }

    //查看详情
    onClickDetail(item) {
        this.setState({
            detailHiddenForMain:true,
            detailHidden: false,
        })
        this.detail.getMeassage(item);
    }


    //分页
    onBaseClick(current, pageSize) {
        this.setState({
            pageNum: current,
            pageSize: pageSize
        }, () => {
            this.getCheckinList()
        });


    }

    onclickSearch() {
        console.info("搜索");
        this.getCheckinList();
    }


    inputChange = (e) => {
            this.setState({
                roomName: e.target.value
            })
        }

    onclickReset() {
        this.setState({
            roomType:undefined,
            roomName:undefined,
            priceTo: "",
            priceFrom:"",
        },() => {
            this.getCheckinList()
        });

    };


    handleOk = e => {
        this.props.form.validateFields((error, values) => {
            console.info("values=========", values);
        })
        // console.log(e);
        // this.setState({
        //     visible: false,
        // });
    };

    handleCancel = e => {
        this.setState({
            visible:false,
            identifySelectId:undefined,
            hiddenFlag:true,
            modelData: {
                visible: false
            },
        }, () => {
            this.refresh()
        });

    }

    priceFrom = (e) => {
        e.persist();
        console.log(e.target.value)
        this.setState({
            priceFrom: e.target.value
        })
    }

    priceTo = (e) => {
        e.persist();
        console.log(e.target.value)
        this.setState({
            priceTo: e.target.value
        })
    }

    refresh() {
        this.selectAllCheckInRecord()
    }

    onRef = (ref) => {
        this.child = ref
    }

    //返回
    returnMain = e => {
        this.setState({
            detailHiddenForMain:false,
            detailHidden: true,
        })
    }

    onRef2=(name,ref) => {
        switch (name) {
            case 'CheckinRecordDetail':
                this.detail = ref
                break
        }
    }

    render() {
        const { getFieldDecorator, getFieldError } = this.props.form
        const { RangePicker } = DatePicker;
        const {selectedRowKeys } = this.state;
        const CheckboxGroup = Checkbox.Group;
        const CheckBox=Checkbox;
        let { c1, c2} = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: (selectedRowKeys) => {
                this.setState({
                    selectedRowIds : selectedRowKeys.map(Number),
                    selectedRowKeys
                })
                console.log(`selectedRowKeys: ${selectedRowKeys}`);
                console.log(this.state.selectedRowIds)
            },
        };
        return (
            <div className="girdBg">
                <div className={this.state.detailHiddenForMain === true ? "elementHidden" : "elementShow"}>
                    <Row className="searchBox">
                        <Col span={24}>
                            <Search style={{width: 250,marginLeft:30}}
                                    placeholder="请输入房间号" onChange={this.inputChange}  allowClear value={this.state.roomName}
                            />
                        </Col>
                    </Row>
                    <Row className="searchBox">
                        <Col span={18}>
                            <input style={{width: 100,marginLeft:30}}
                                   placeholder="请输入入住时间" onChange={this.priceFrom}  value={this.state.priceFrom} allowClear
                            />
                            <span  style={{width: 10,marginLeft:15}}>  ---   </span>
                            <input style={{width: 100,marginLeft:15}}
                                   placeholder="请输入退房时间" onChange={this.priceTo} value={this.state.priceTo} allowClear
                            />
                            <Button icon={"search"} type='primary' style={{marginLeft: 30}}
                                    onClick={this.onclickSearch.bind(this)}>搜索</Button>
                            <Button icon={"reset"} style={{marginLeft: 30}} onClick={this.onclickReset.bind(this)}>重置</Button>
                        </Col>
                    </Row>
                    <Row style={{margin: 30}}>
                        <Table
                            columns={this.columns}
                            dataSource={this.state.data}
                            scroll={{x: 'max-content'}} // 加上这条  横向滚动  支持此属性的浏览器内容就不会换行了
                            rowSelection={rowSelection}
                            rowKey={record =>record.userId}
                            columns={this.columns.map(item => { // 通过配置 给每个单元格添加不换行属性
                                const fun = () => ({style: {whiteSpace: 'nowrap'}});
                                item.onHeaderCell = fun;
                                item.onCell = fun;
                                return item;
                            })}
                            pagination={{
                                simple: false,
                                current: this.state.pageNum,
                                total: this.state.total,
                                pageSize: this.state.pageSize,
                                showTotal: (count = this.state.total) => {
                                    return '共' + count + '条'
                                },
                                onChange: (current, pageSize) => {
                                    this.onBaseClick(current, pageSize)
                                }
                            }}
                        />
                    </Row>
                </div>
                {/*查看详情的Detail*/}
                <div className={this.state.detailHidden === true ? "elementHidden" : "elementShow"}>
                    <Detail returnMain={this.returnMain} onRef2={this.onRef2.bind(this)}/>
                </div>
            </div>
        )
    }
}

export default CheckinRecord
